<template>
	<view class="list">
		<view class="fixed-bg" :style="{'background-image':'url('+ songDetails.coverImgUrl +')'}" v-if="songDetails.coverImgUrl"></view>
		
		<music-head title="歌单" :showIcon="true" fontColor="white"  :top="menuButtonInfo.top"></music-head>

		<view class="scroll-box">
			<scroll-view scroll-y="true">
				<view class="list-head">
					<view class="head-img">
						<image :src="songDetails.coverImgUrl" mode=""></image>
						<text>{{ songDetails.playCount | formatNum}}</text>
					</view>
					<view class="head-text">
						<view>{{ songDetails.name }}</view>
						<view>
							<image :src="songDetails.creator.avatarUrl" mode=""></image>
							{{ songDetails.creator.nickname || '温情key' }}
						</view>
						<view>
							<text>{{ songDetails.description }}</text>
						</view>
					</view>
				</view>

				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="list-share">
					<text class="iconfont iconicon-"></text>
					分享给微信好友
				</button>
				<!-- #endif -->

				<view class="list-music">
					<view class="music-head" @tap="playMusic(songList[0].id)">
						<text class="iconfont iconbofang1"></text>
						<text>播放全部</text>
						<text>(共{{ songDetails.trackCount || 0 }}首)</text>
					</view>
					<view class="music-item" v-for="(item, index) in songList" :key="item.id" @tap="playMusic(item.id)">
						<view class="item-top">{{ index + 1 }}</view>
						<view class="item-song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="privileges[index].flag > 60 && privileges[index].flag < 70" src="../../static/dujia.png" mode=""></image>
								<image v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" mode=""></image>
								<text v-for="(itm, idx) in item.ar" :key="itm.id" class="singer">{{ itm.name }}{{ idx + 1 === item.ar.length ? ' ' : '/' }}</text> - {{ item.name }}
							</view>
						</view>
						<text class="iconfont iconbofang"></text>
					</view>
				</view>
				
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
import musicHead from '@/components/music_head/music_head.vue';
import { playListDetail } from '@/common/api.js';
export default {
	components: {
		musicHead
	},
	data() {
		return {
			// 歌单详情数据
			songDetails: {
				creator: {
					avatarUrl: ''
				}
			},
			// 歌单歌曲数组
			songList: [],
			// 独家/SQ
			privileges: [],
			// 微信小程序胶囊按钮信息
			menuButtonInfo: {
				top: 20
			}
		};
	},
	onLoad(options) {
		// #ifdef MP-WEIXIN
		/* 获取微信小程序胶囊按钮信息 */
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		console.log('胶囊按钮信息', this.menuButtonInfo);
		// #endif
		/* 歌单详情 */
		playListDetail(options.id).then(res => {
			console.log(res[1].data.playlist); 
			this.songDetails = res[1].data.playlist;
			this.privileges = res[1].data.privileges;
			this.songList = res[1].data.playlist.tracks;
		});
	},
	methods: {
		/* 播放音乐 */
		playMusic(id) {
			let ids = this.songDetails.trackIds.map(item => {
				return { id: item.id }
			})
			this.$store.commit('init_topListIds', ids);
			uni.navigateTo({
				url: `/pages/detail/detail?songId=${id}`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.list-head {
	display: flex;
	margin: 30rpx;
	.head-img {
		width: 264rpx;
		height: 264rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		margin-right: 42rpx;
		image {
			width: 100%;
			height: 100%;
		}
		text {
			position: absolute;
			right: 8rpx;
			top: 8rpx;
			color: white;
			font-size: 26rpx;
		}
	}
	.head-text {
		flex: 1;
		color: #f0f2f7;
		view:nth-child(1) {
			font-size: 34rpx;
			color: white;
		}
		view:nth-child(2) {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			font-size: 24rpx;
		}
		view:nth-child(2) image {
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
			margin-right: 14rpx;
		}
		view:nth-child(3) {
			line-height: 32rpx;
			font-size: 22rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
	}
}

.list-share {
	width: 330rpx;
	height: 74rpx;
	margin: 0 auto;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 36rpx;
	color: white;
	text-align: center;
	line-height: 74rpx;
	font-size: 28rpx;
	text {
		margin-right: 16rpx;
	}
}

.list-music {
	background-color: white;
	border-radius: 40rpx;
	margin-top: 40rpx;
	overflow: hidden;
	.music-head {
		height: 50rpx;
		margin: 30rpx 0 70rpx 22rpx;
		text:nth-child(1) {
			height: 50rpx;
			font-size: 50rpx;
			padding-left: 10rpx;
		}
		text:nth-child(2) {
			font-size: 30rpx;
			margin: 0 10rpx 0 16rpx;
		}
		text:nth-child(3) {
			font-size: 26rpx;
			color: #b2b2b2;
		}
	}
	.music-item {
		display: flex;
		margin: 0 32rpx 66rpx;
		align-items: center;
		.item-top {
			padding-left: 10rpx;
			width: 58rpx;
			color: #959595;
			font-size: 30rpx;
			line-height: 30rpx;
		}
		.item-song {
			flex: 1;
		}
		.item-song view:nth-child(1) {
			font-size: 28rpx;
			color: black;
			overflow: hidden;
			width: 70vw;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.item-song view:nth-child(2) {
			display: flex;
			font-size: 20rpx;
			align-items: center;
			width: 70vw;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			image {
				width: 32rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
			.singer {
				font-size: 20rpx;
				color: black;
			}
		}
		text {
			font-size: 50rpx;
			color: #c7c7c7;
		}
	}
}
</style>
